<template>
    <div class="bg">
        <div class="login">
            <div class="title">注 册 新 用 户</div>
            <el-form ref="formRef" status-icon :rules="data.rules" :model="data.form" label-width="20px" style="padding: 20px 30px 10px 0">
                <el-form-item prop="username">
                    <el-input v-model="data.form.username" autocomplete="off" prefix-icon="User" placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item prop="password" >
                    <el-input show-password v-model="data.form.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item prop="password2">
                    <el-input show-password v-model="data.form.password2" autocomplete="off" prefix-icon="Lock" placeholder="请再次输入密码"/>
                </el-form-item>
                <div class="btn">
                    <el-button type="primary" style="width: 100%;margin-left: 30px;" @click="register">注册</el-button>
                </div>
                <!-- <div  style="text-align: center">
                    <a style="color: #465CFF; font-size: 14px;" href="/register">注册账号</a>
                    &nbsp;&nbsp;&nbsp;
                    <a style="color: #465CFF; font-size: 14px;" href="/forget">忘记密码</a>
                </div> -->
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import router from '@/router';
const formRef=ref()

const validatePass = (rule, value, callback) => {
  // value 表示用户输入的确认密码
  if (value !== data.form.password) {
    callback(new Error("两次输入的密码不匹配！"))
  } else {
    callback()
  }
}
const data=reactive({
    form:{
        username:"",
        password:"",
        password2:""
        
    },
    rules:{
        username:[
            {required:true,message:"请输入账号",trigger:"blur"}
        ],
        password:[
            {required:true,message:"请输入密码",trigger:"blur"}
        ],
        password2:[{required:true,message:"请再次输入密码",trigger:"blur"},
            {validator:validatePass,trigger:"blur"}
        ]
        
    }

})

const register=()=>{
    formRef.value.validate((valid)=>{
        if(valid){
            request.post('/register',data.form).then(res=>{
        if(res.code=='200'){
            console.log('res',res)
            // 存储用户信息
            // localStorage.setItem('code_user',JSON.stringify(res.data||{}))
            ElMessage.success('注册成功')
            router.push('/login')
        }else{
            ElMessage.error("注册失败")
        }
    }
    )
        }
    })
    
}
</script>
<style  lang="scss" scoped>
.bg{
    background-image: url("@/assets/imgs/bg2.jpg");
    background-size: cover;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    .login{
        width: 400px;
        height: 300px;
        background-color:white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .title{
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        margin-top: 20px;
    }
    .btn{
        display: flex;
        justify-content: center;
    }
}
</style>